<template>
  <div class="shop">
    <navBar :navtitle="titles"></navBar>
    <!-- <div class="nav"></div> -->
    <div class="content">
      <div class="shang">
        <div class="shopsou">
          <p class="inp">
            <img class="in-img" src="../../assets/image/ic_store_search.png" alt>
            <input class="inpt" @click="getSou" type="text" placeholder="搜索店铺商品">
          </p>
          <div class="shou">
            <div class="sh-left">{{this.$store.state.dealerIds.name}}</div>
            <div class="sh-right" v-if="add" >
              <span class="ren">0人</span>
              <div class="xing" @click="getadd">
                <img class="x-in" src="../../assets/ic-bills-wcollection.png" alt>
                <p class="cang"> 收藏</p>
              </div>
            </div>
            <div class="sh-right" v-else>
              <span class="ren">1人</span>
              <div class="xing" @click="getdel">
                <img class="x-in" src="../../assets/image/ic-bills-collection.png" alt>
                <p class="cang">已收藏</p>
              </div>
            </div>
          </div>
        </div>
        <div class="jiage">
          <ul class="title">
            <li :class="{active:cur==0}" @click="getaxios('shelvesTime',0)">默认</li>
            <li :class="{active:cur==1}" @click="getaxios('salesVolume',1)">销量</li>
            <li :class="{active:cur==2}" @click="getaxios('orderPrice',2)">
              价格
              <img class="xuan" src="../../assets/image/storeNav/ic_sort_defult.png" alt>
            </li>
          </ul>
        </div>
        <div class="prich">
          <p class="pric-left" @click="getPric()">
            <img class="le-img" v-show="stock==1" src="../../assets/image/ic_screenCheck.png" alt>
            <img class="le-img" v-show="stock==2" src="../../assets/image/ic_rectangle1@3x.png" alt>
            <span>仅显示有货</span>
          </p>
          <p class="pric-right" @click="getPage()">
            <img class="ri-img" v-show="tagRecommend==2" src="../../assets/image/ic_rectangle1@3x.png" alt>
            <img class="ri-img" v-show="tagRecommend==1" src="../../assets/image/ic_screenCheck.png" alt>
            <span>推荐</span>
          </p>
        </div>
      </div>
      <div class="xia">
        <ul class="list">
          <li v-for="(item,index) in goodses.goodses" :key="index">
            <img class="li-img" :src="item.picsUrl" alt>
            <p class="lue">{{item.goodsName}}</p>
            <p class="qian">
              ￥
              <span>{{item.orderPrice}}</span>
            </p>
            <div class="gou">
              <div class="g-left">
                <!-- <span class="zeng">赠品</span>
                <span class="dian">店铺满赠</span> -->
              </div>
              <img class="g-right" src="../../assets/tabbar/ic_cart_default.png" alt>
            </div>
            <div class="di">
              <span class="pi">5瓶起批</span>
              <span class="pi">已售200瓶</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="recom" v-show="tagRecommend==1">
        <img class="re-img" src="../../assets/image/ic_search_no_data.png" alt="">
        <p class="wu">无商品可售</p>
      </div>
      <div class="kong"></div>
    </div>
    <footBar></footBar>
  </div>
</template>

<script>
import navBar from "@/components/shop/NavBar.vue";
import footBar from "@/components/shop/footBar.vue";
import axios from "axios";
export default {
  name: "shop",
  components: {
    navBar,
    footBar
  },
  data() {
    return {
      titles: "",
      orderBy:'',
      cur:0,
      goodses: "",
      page:true,
      pric:true,
      stock:1,
      tagRecommend:2,
      lis:'',
      add:false,
      dealerId:this.$store.state.dealerIds.custId,
    };
  },
  methods: {
    
    getSou(){
        this.$router.replace('/sousuo')
    },
    getPric(){
      // this.pric = !this.pric
      // stock
      if(this.stock==1){
        this.stock=2
        console.log('stock:'+this.stock)
      }else{
        this.stock=1
        console.log('stock:'+this.stock)
      }
      
        this.getAxios()
    },
    getPage(){
      // this.page = !this.page
      if(this.tagRecommend==2){
        this.tagRecommend=1
        console.log(this.tagRecommend)
      }else{
        this.tagRecommend=2
        console.log(this.tagRecommend)
      }
      this.getAxios()
    },
    getaxios(orderBy,index){
      this.getAxios(orderBy,index)
      this.cur=index
      console.log(index)
    },
    getAxios(orderBy,) {
      this.titles=this.$store.state.dealerIds.name
      axios
        .post("https://web-gateway.newbeescm.com/b2b-app-web/searchGoodsList", {
            cityId: this.$store.state.merchantInfo.cityId,
            countyId: this.$store.state.merchantInfo.districtId,
            dealerId: this.dealerId,
            groupStoreId: this.$store.state.storeId.id,
            merchantId: this.$store.state.merchantInfo.merchantId,
            orderBy,
            orderWay: 0,
            pageNum: 1,
            pageSize: 20,
            provId: this.$store.state.merchantInfo.provinceId,
            stationId: this.$store.state.stationId,
            status: 1,
            stock: this.stock,
            storeId: this.$store.state.storeId.storeId,
            tagRecommend: this.tagRecommend,
            town:this.$store.state.merchantInfo.streetId,
        })
        .then(res => {
          console.log(res);
          if (res.data.status.statusCode === 0) {
            this.goodses = res.data.result;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    
    getCollect() {
      let userId=this.$store.state.userInfo.id
      let headers
            if (this.$store.state.token) {
                headers = {
                token: this.$store.state.token,
                userId: this.$store.state.userInfo.id
                };
            } else {
                headers = {};
            }
      this.$http.post(
          "https://web-gateway.newbeescm.com/b2b-app-web/dealerColl/collectStatus",{},
          {
            headers,
            params:{
              dealerId: this.dealerId,
              userId: this.$store.state.userInfo.id
              } 
          },
        )    
        .then(res => {
          console.log(res);
          if (res.data.status.statusCode === 0) {
            this.lis=res.data.result
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getadd(){
      let headers;
            if (this.$store.state.token) {
                headers = {
                token: this.$store.state.token,
                userId: this.$store.state.userInfo.id
                };
            } else {
                headers = {};
            }
            console.log(this.$store.state.userInfo.id)
      this.$http.post("https://web-gateway.newbeescm.com/b2b-app-web/dealerColl/add",
          {           
              dealerId: this.dealerId,
              userId: this.$store.state.userInfo.id
          },
          {
            headers,
          }
        )    
        .then(res => {
          console.log(res);
          if (res.data.status.statusCode === 0) {
            this.add=res.data.result
            this.add=!this.add
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getdel(){
      let headers;
            if (this.$store.state.token) {
                headers = {
                token: this.$store.state.token,
                userId: this.$store.state.userInfo.id
                };
            } else {
                headers = {};
            }
            console.log(this.$store.state.userInfo.id)
      this.$http.post("https://web-gateway.newbeescm.com/b2b-app-web/dealerColl/del",
          {           
              dealerId: 14607,
              userId: this.$store.state.userInfo.id
          },
          {
            headers,
          }
        )    
        .then(res => {
          console.log(res);
          if (res.data.status.statusCode === 0) {
            this.lis=res.data.result
            this.add=!this.add
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    // this.$nextTick(()=>{
      this.getAxios('shelvesTime',0),
      this.getCollect()
    // })
  }
};
</script>

<style lang="scss" scoped>
.nav {
  width: 100%;
  height: 0.45rem;
}
.content {
  width: 100%;
  .shang {
    margin-bottom: 1px solid #f2f1f6;
    .shopsou {
      width: 100%;
      background: #dd3333;
      padding-top: 0.1rem;
      .inp {
        width: 92.5%;
        height: 0.3rem;
        background: rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        margin-left: 0.14rem;
        border-radius: 45px;
        box-sizing: border-box;
        .in-img {
          width: 0.16rem;
          height: 0.16rem;
          margin: 0.06rem 0 0.06rem 0.1rem;
        }
        .inpt {
          width: 85%;
          height: 0.25rem;
          outline: none;
          border: none;
          background: none;
          color: #fff;
        }
      }
      .shou {
        width: 100%;
        height: 0.4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.05rem;
        padding: 0 0.14rem;
        box-sizing: border-box;
        color: #fff;
        .sh-left {
          font-size: 0.14rem;
        }
        .sh-right {
          height: 0.4rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .ren {
            font-size: 0.1rem;
            color: #fff;
            margin-right: 0.1rem;
          }
          .xing {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #fff;
            padding: 0 0.02rem;
            .x-in {
              width: 0.14rem;
              height: 0.14rem;
              margin-right: 0.04rem;
            }
            .cang {
              font-size: 0.12rem;
              color: #fff;
            }
          }
        }
      }
    }
    .jiage {
      width: 100%;
      height: 0.4rem;
      .title {
        width: 100%;
        height: 0.4rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        li {
          height: 0.4rem;
          font-size: 0.12rem;
          color: #333;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .xuan {
            width: 0.08rem;
            height: 0.08rem;
          }
        }
        .active {
          color: #dd3333;
        }
      }
    }
    .prich {
      width: 100%;
      height: 0.4rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      background: #ddd;
      // background: #ddd;
      padding: 0 0.03rem;
      .pric-left {
        font-size: 0.12rem;
        margin-left: 0.14rem;
        margin-right: 0.1rem;
        .le-img {
          width: 0.1rem;
          height: 0.1rem;
          margin-right: 0.06rem;
        }
      }
      .pric-right {
        font-size: 0.12rem;
        .ri-img {
          width: 0.1rem;
          height: 0.1rem;
          margin-right: 0.06rem;
        }
      }
    }
  }
  .xia {
    width: 100%;
    .list {
      width: 100%;
      overflow: hidden;
      li {
        width: 50%;
        height: 2.675rem;
        padding: 0.1rem 0.14rem;
        box-sizing: border-box;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
        float: left;
        .li-img {
          width: 1.6rem;
          height: 1.6rem;
        }
        .lue {
          font-size: 0.12rem;
          color: #333;
          line-height: 0.12rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          max-width: 1.6rem;
          margin: 0.06rem 0;
        }
        .qian {
          font-size: 0.09rem;
          color: #000;
          margin-top: 0.06rem;
          span {
            color: #DD3333;
            font-size: 0.18rem;
          }
        }
        .gou {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;

          .g-left {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 0.2rem;
            // .zeng {
            //   border: 1px solid #dd3333;
            //   // padding: 0.04rem 0.03rem 0.03rem 0.04rem;
            //   border-radius: 0.02rem;
            //   margin-right: 0.1rem;
            //   font-size: 0.1rem;
            //   color: #dd3333;
            // }
            // .dian {
            //   border: 1px solid #dd3333;
            //   // padding: 0.04rem 0.03rem 0.03rem 0.04rem;
            //   border-radius: 0.02rem;
            //   font-size: 0.12rem;
            //   color: #dd3333;
            // }
          }
          .g-right {
            width: 0.16rem;
            height: 0.16rem;
            position: absolute;
            right: 0;
            top: 0;
          }
        }
        .di {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 0.05rem;
          .pi {
            font-size: 0.12rem;
            color: #999;
            margin-right: 0.09rem;
          }
        }
      }
    }
  }
  .recom{
    width: 100%;
    height: 4.1rem;
    background: #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .re-img{
      width: 1.14rem;
      height: 0.63rem;
    }
    .wu{
      font-size: 0.12rem;
      color: #eee;
    }
  }
  .kong {
    width: 100%;
    height: 0.5rem;
  }
}
</style>
